<template>
  <div>
    <el-tabs type="border-card">
      <el-tab-pane label="审批历史">
        <div>
        <el-table
          :data="tableData"
          border
          style="width: 100%"
          :cell-style="{ 'text-align': 'center' }"
          :header-cell-style="{ 'text-align': 'center' }"
        >
          <el-table-column label="序号" type="index" width="55">
          </el-table-column>
          <!-- <el-table-column prop="modified_time" label="时间"> </el-table-column> -->
          <el-table-column prop="modified_time" label="日期" sortable>
            <template slot-scope="scope">{{
              scope.row.modified_time | dateYMDHMSFormat_ss
            }}</template>
          </el-table-column>
          <el-table-column prop="process_step.name" label="审批阶段">
          </el-table-column>
          <el-table-column prop="creator.name" label="操作者">
          </el-table-column>
          <el-table-column prop="result" label="结果"> </el-table-column>
          <el-table-column prop="opinion" label="意见"> </el-table-column>
        </el-table>
          <el-pagination
          style="margin-top:10px"
            @current-change="handlePaginationChange"
            :current-page="formInline.p"
            :page-size="formInline.pageSize"
            layout="total, prev, pager, next"
            :total="formInline.count"
          >
          </el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="审批流程">
        <!-- <el-steps finish-status="success" simple style="margin-top: 20px">
          <el-step :title='item.name' v-for="item in shuju" :key="item.id"></el-step>
        </el-steps> -->
        <el-tooltip
          class="item"
          effect="dark"
          placement="bottom"
          v-for="item in shuju"
          :key="item.id"
        >
          <div slot="content">
            审批人：{{ item.name }}<br />抄送人：{{ item.name }}
          </div>
          <el-button style="width:30%">{{ item.name }}</el-button>
        </el-tooltip>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import api from "@/api";
import { getOrder_process_his, getWorkflow_step } from "@/api/url";
export default {
  data() {
    return {
      tableData: [],
      id: this.$route.query.id,
      shuju: [],
      formInline: {
        p: 1,
        pageSize: 20,
        count: 0,
        order_id: ""
      }
    };
  },
  created() {
    this.begin_fn();
    if (this.id == undefined) {
      getOrder_process_his().then(res => {
        res.result.results.forEach(item => {
          if (item.result == 0) {
            item.result = "发起";
          } else if (item.result == 1) {
            item.result = "同意";
          } else if (item.result == 2) {
            item.result = "驳回";
          } else if (item.result == 3) {
            item.result = "退审";
          }
        });
        this.formInline.count = res.result.count;
        this.tableData = res.result.results;
      });
    } else {
      this.formInline.order_id = this.id;
      // var datass = {
      //   order_id:this.id
      // }
      getOrder_process_his(this.formInline).then(res => {
        res.result.results.forEach(item => {
          if (item.result == 0) {
            item.result = "发起";
          } else if (item.result == 1) {
            item.result = "同意";
          } else if (item.result == 2) {
            item.result = "驳回";
          } else if (item.result == 3) {
            item.result = "退审";
          }
        });
        this.formInline.count = res.result.count;
        this.tableData = res.result.results;
      });
    }
  },
  methods: {
    begin_fn() {
      var data = {
        flow_id: this.id
      };
      getWorkflow_step(data).then(res => {
        this.shuju = res.result;
      });
    },
    handleCurrentChange(val) {
      this.currentRow = val;
    },
    handlePaginationChange(val) {
      this.formInline.p = val;
      getOrder_process_his(this.formInline).then(res => {
        res.result.results.forEach(item => {
          if (item.result == 0) {
            item.result = "发起";
          } else if (item.result == 1) {
            item.result = "同意";
          } else if (item.result == 2) {
            item.result = "驳回";
          } else if (item.result == 3) {
            item.result = "退审";
          }
        });
        this.formInline.count = res.result.count;
        this.tableData = res.result.results;
      });
    }
  }
};
</script>
<style scoped>
.flex_,
.flex_just {
  display: flex;
  justify-content: space-between;
}
.flex_ > div:nth-child(1) {
  width: 400px;
}
.flex_ > div:nth-child(2) {
  flex: 1;
  padding-left: 20px;
}
.header_text {
  display: flex;
  justify-content: space-between;
  font-size: 17px;
  font-weight: 700;
  line-height: 17px;
}
.el-tag {
  margin-left: 10px;
  margin-right: 10px;
}
.titles {
  font-weight: 600;
  padding: 5px;
  background-color: rgb(183, 222, 232);
  margin: 10px 0px;
}
.icons {
  font-size: 25px;
  line-height: 72px;
  padding: 0px 10px;
  font-weight: 600;
}
.el-tab-pane {
  display: flex;
  justify-content: center;
}
</style>
